<template>
    <div>
        <el-alert
                title="警告"
                type="warning"
                description="以下为接口数据，非系统开发人员请不要随意修改接口信息，否则会导致接口无法使用！"
                show-icon>
        </el-alert>
        <div style='margin:10px 0px'>
            <el-button type='primary' @click='create()'>创建接口</el-button>
        </div>
        <el-row :gutter='20'>
            <el-col :span='16'>
                <menu-list show-path height='400px' ref='menuList' @node-click='nodeClick'>
                    <template slot='right' slot-scope='{node,data}'>
						<span>
		          <el-button
                          type="text"
                          icon='el-icon-plus'
                          @click='create(data)'>
		          </el-button>
		          <el-button
                          type="text"
                          icon='el-icon-edit'
                          @click='edit(node,data)'>
		          </el-button>
		          <el-button
                          type="text"
                          icon='el-icon-delete'
                          @click='del(node,data)'>
		          </el-button>
		        </span>
                    </template>
                </menu-list>
            </el-col>
            <el-col :span='8' style='height:100%'>
                <el-card class="box-card" shadow='hover'>
                    <div slot="header" class="clearfix">
                        <span>接口详情</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click='onlyShow'>只显示此接口</el-button>
                    </div>
                    <el-form
                            ref='form' label-width='70px' size='mini' class='c-form-text'>
                        <el-form-item label='接口名称'>
                            <span>{{ nodeData.api_name}}</span>
                        </el-form-item>
                        <el-form-item label='接口路径'>
                            <span>{{ nodeData.url }}</span>
                        </el-form-item>
                        <el-form-item label='接口类型'>
                            <span>{{ dict.api_auth.type[nodeData.type] ? dict.api_auth.type[nodeData.type].name : nodeData.type  }}</span>
                        </el-form-item>
                        <el-form-item label='启用状态' >
                            <span>{{ dict.api_auth.status[nodeData.status] ? dict.api_auth.status[nodeData.status].name : nodeData.status  }}</span>
                        </el-form-item>
                        <el-form-item label='接口备注'>
                            <span>{{ nodeData.remark }}</span>
                        </el-form-item>

                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        <edit-dialog ref='editDialog' @updated='reload'/>
    </div>
</template>
<script>
  import menuList   from '@/components/api/auth/treeList'
  import editDialog from '@/components/api/auth/editDialog'
  import {mapState} from 'vuex'

  export default {
    components: {menuList, editDialog},
    data() {
      return {
        form: {},
        nodeData: {}
      }
    },
    computed: {
      ...mapState({
        dict: state => state.sys.dict,
      })
    },
    mounted() {
      this.$refs.menuList.initData()
    },
    methods: {
      create(data = null) {
        this.$refs.editDialog.open().then(that => {
          if (data) {
            that.assign({
              parent_id: data.id,
              parent_menu: data.title
            })
          }
        })
      },
      edit(node, data) {
        let editData = {...data}
        editData.parent_menu = node.parent.data.api_name
        this.$refs.editDialog.open().then(that => {
          that.initData(editData)
        })
      },
      del(node, data) {
        this.$refs.menuList.del(node, data)
      },
      reload() {
        this.$refs.menuList.reload()
      },
      nodeClick(data) {
        this.nodeData = data
      },
      onlyShow() {
        this.$refs.menuList.filter(this.nodeData.api_name)
      }
    }
  }
</script>
